<script>
import { Main, Container, Header, Aside } from 'element-ui'
import AsideMenu from '@/components/AsideMenu'
export default {
  name: 'Home',
  components: {
    'el-container': Container,
    'el-header': Header,
    'el-aside': Aside,
    'el-main': Main,
    AsideMenu
  },
  data() {
    return {
      menu: {
        title: 'menu',
        groups: [
          {
            title: '11',
            items: [
              { name: 'item1', submenu: [{ name: 'sub1' }, { name: 'sub2' }] },
              { name: 'item2' }
            ]
          },
          {
            title: 'group2',
            items: [{ name: 'item1' }]
          }
        ]
      }
    }
  }
}
</script>

<template>
  <el-container>
    <el-header>Header</el-header>
    <el-container direction='horizontal'>
      <el-aside>
        <AsideMenu :menu='menu'></AsideMenu>
      </el-aside>
      <el-main>main</el-main>
    </el-container>
  </el-container>
</template>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.el-aside {
  height: 100vw;
  width: 200px;
  background: rgb(238, 241, 246);
}
</style>
